<template>
  <div class="logistics-container">
    <div class="header">
      <a href="javascript:void(0)" @click="$router.go(-1)" class="back-button">
        <img src="./me-img/back.png" alt="返回" width="40%" height="100%" />
      </a>
      <img src="./me-img/logo.png" alt="logo" class="logo" />
    </div>

    <div class="body">
      <div class="logistics-content">
        <h2 class="title">物流信息</h2>

        <div class="info-card">
          <div class="info-row">
            <span class="label">订单编号：</span>
            <span class="value">{{ orderInfo.number }}</span>
          </div>
          <div class="info-row">
            <span class="label">物流状态：</span>
            <span class="value">{{ orderInfo.transport }}</span>
          </div>
        </div>

        <!-- 物流时间轴 -->
        <div class="timeline">
          <!-- 每个时间轴项目，我正在进行的项目会添加active类 -->
          <div
            class="timeline-item"
            :class="{ active: index === transNumber(orderInfo.transport) }"
            v-for="(item, index) in logisticsSteps"
            :key="index"
          >
            <!-- 原点 -->
            <div class="timeline-dot"></div>
            <div class="timeline-content">
              <div class="timeline-time">{{ item.time }}</div>
              <div class="timeline-desc">{{ item.desc }}</div>
            </div>
          </div>
        </div>

        <button class="confirm-btn" @click="confirmReceipt">确认收货</button>
      </div>
    </div>
  </div>
</template>

<script>
import orderData from "./me.json";

export default {
  name: "Logistics",
  data() {
    return {
      // 储存当前订单信息
      orderInfo: {},
      logisticsSteps: [
        {
          time: this.getCurrentTime(2), //3小时前的时间
          desc: "预计送达时间",
        },
        {
          time: this.getCurrentTime(0.5),
          desc: "预计开始运输时间",
        },
        {
          time: this.getCurrentTime(0),
          desc: "包裹准备发货",
        },
      ],
    };
  },
  created() {
    // 从路由参数获取orderId并转为数字
    const orderId = parseInt(this.$route.query.orderId);
    // 在订单数据中查找匹配的订单
    this.orderInfo = orderData.products.find((item) => item.id === orderId) || {};

    // 如果找不到订单信息，返回上一页
    if (!this.orderInfo.id) {
      this.$router.go(-1);
    }
  },
  methods: {
    // 正在运行的项目
    transNumber(num) {
      if (num == "未发货") {
        return 2;
      } else if (num == "运输中") {
        return 1;
      } else if (num == "已送达") {
        return 0;
      }
    },
    // 获取当前时间并添加偏移量
    getCurrentTime(offsetHours) {
      const now = new Date();
      // 将小时偏移转换为毫秒（包括小数部分）
      now.setTime(now.getTime() + offsetHours * 60 * 60 * 1000);
      return `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")} ${now
        .getHours()
        .toString()
        .padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`;
    },
    // 确认收货
    confirmReceipt() {
      // 更新订单状态为待评价
      // 获取当前订单ID
      const orderId = this.orderInfo.id;
      // 查找订单索引
      const orderIndex = orderData.products.findIndex((item) => item.id === orderId);

      // 如果找到订单
      if (orderIndex !== -1) {
        // 更新订单状态为待评价
        orderData.products[orderIndex].status = "pendingReview";
        alert("收货成功！请返回");
      }
    },
  },
};
</script>

<style scoped>
.logistics-container {
  min-height: 100vh;
  background-color: #ffffff;
  min-width: 1000px;
  overflow-x: auto;
}

.header {
  background-color: #f4efd2;
  height: 50px;
  align-items: center;
  box-shadow: #bdbbb7 0px 2px 8px;
  padding: 2px 0px;
}

.header,
.body {
  width: 60%;
  margin: 0px auto;
  overflow: hidden;
  display: flex;
}

.body {
  margin: 30px auto;
  min-height: 700px;
  background-color: #ffffff;
}

.logo {
  width: 10%;
  height: auto;
  margin-left: auto;
}

.back-button {
  color: #333;
  display: flex;
  width: 10%;
  height: 100%;
  text-decoration: none;
  line-height: 40px;
  overflow: hidden;
}

.logistics-content {
  width: 100%;
  padding: 20px;
  background-color: #f4efd2;
  border-radius: 10px;
  box-shadow: #bdbbb7 0px 0px 5px;
}

.title {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.info-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: #bdbbb7 0px 0px 3px;
}

.info-row {
  display: flex;
  margin-bottom: 15px;
  font-size: 16px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: bold;
  width: 120px;
}

.value {
  flex: 1;
}

.timeline {
  position: relative;
  padding-left: 30px;
  margin-bottom: 40px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #d9c596;
}

.timeline-item {
  position: relative;
  margin-bottom: 25px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -30px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #d9c596;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #d9c596;
}

.timeline-item.active .timeline-dot {
  background-color: rgb(237, 129, 51);
  box-shadow: 0 0 0 2px rgb(237, 129, 51);
}

.timeline-content {
  padding: 10px 15px;
  background-color: white;
  border-radius: 6px;
  box-shadow: #bdbbb7 0px 0px 3px;
}

.timeline-time {
  font-weight: bold;
  color: rgb(237, 129, 51);
  margin-bottom: 5px;
}

.timeline-desc {
  color: #333;
}

.confirm-btn {
  display: block;
  width: 200px;
  height: 50px;
  margin: 30px auto 0;
  background-color: rgb(237, 129, 51);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: #bdbbb7 0px 0px 3px;
}

.confirm-btn:hover {
  opacity: 0.9;
}
</style>
